1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
'use client';
import { Column, Grid, ListItem, SearchField, Select } from '@umami/react-zen';
import { useState } from 'react';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { Panel } from '@/components/common/Panel';
import { useDateRange, useMessages } from '@/components/hooks';
import { Journey } from './Journey';
const JOURNEY_STEPS = [2, 3, 4, 5, 6, 7];
const DEFAULT_STEP = 3;
export function JourneysPage({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const {
dateRange: { startDate, endDate },
} = useDateRange();
const [steps, setSteps] = useState(DEFAULT_STEP);
const [startStep, setStartStep] = useState('');
const [endStep, setEndStep] = useState('');
return (
<Column gap>
<WebsiteControls websiteId={websiteId} />
<Grid columns="repeat(3, 1fr)" gap>
<Select
items={JOURNEY_STEPS}
label={formatMessage(labels.steps)}
value={steps}
defaultValue={steps}
onChange={setSteps}
>
{JOURNEY_STEPS.map(step => (
<ListItem key={step} id={step}>
{step}
</ListItem>
))}
</Select>
<Column>
<SearchField
label={formatMessage(labels.startStep)}
value={startStep}
onSearch={setStartStep}
delay={1000}
/>
</Column>
<Column>
<SearchField
label={formatMessage(labels.endStep)}
value={endStep}
onSearch={setEndStep}
delay={1000}
/>
</Column>
</Grid>
<Panel height="900px" allowFullscreen>
<Journey
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
steps={steps}
startStep={startStep}
endStep={endStep}
/>
</Panel>
</Column>
);
}
|